import React from 'react';
import { Card, Row, Col, Statistic, Progress } from 'antd';
import { 
  DatabaseOutlined, 
  SettingOutlined, 
  SearchOutlined, 
  FileTextOutlined 
} from '@ant-design/icons';

const Dashboard: React.FC = () => {
  return (
    <div>
      <Row gutter={16} style={{ marginBottom: 16 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="数据表数量"
              value={28}
              prefix={<DatabaseOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="规则配置"
              value={15}
              prefix={<SettingOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="查询次数"
              value={128}
              prefix={<SearchOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="日志记录"
              value={256}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="系统状态" style={{ height: 300 }}>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>数据库连接状态</div>
              <Progress percent={100} status="active" strokeColor="#52c41a" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>系统性能</div>
              <Progress percent={85} status="active" />
            </div>
            <div>
              <div style={{ marginBottom: 8 }}>存储空间</div>
              <Progress percent={65} status="active" strokeColor="#faad14" />
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="最近操作" style={{ height: 300 }}>
            <p>暂无最近操作记录</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;